<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=tree-basic
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <button onclick="handleClick()">剪支</button>
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="./filter.js"></script>

    <script type="text/javascript">
        function init (data) {
            let dom = document.getElementById('container');
            let myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            let app = {};
            let ROOT_PATH = 'https://echarts.apache.org/examples';
            let option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove',
                    backgroundColor: '#dfdfdf',
                    textStyle: {
                        color: 'black'
                    }
                },
                series: [
                    {
                        type: "tree",
                        symbolSize: 75,
                        symbol: 'roundRect',
                        edgeShape: 'polyline',
                        edgeForkPosition: '50%',
                        initialTreeDepth: 2,
                        orient: 'LR',
                        itemStyle: {
                            color: 'black',
                            borderColor: 'black',
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750,
                        lineStyle: {
                            color: '#7b7b7b',
                            width: 3
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                fontSize: 15,
                                color: '#fff',
                            },
                        },
                        data: [data]
                    }]
            }
            myChart.setOption(option,true);
        }
        init(tree)

        function handleClick () {
            init(resNum)
        }
    </script>
</body>

</html>